<template>
  <div>
    <h3>{{ MusicList }} 的歌曲列表</h3>
  </div>
</template>

<script>
export default {
  name: "MusiceDetail",
//   mounted() {
//     console.log(this.$route)
//   },
  computed: {
    MusicList() {
      // 获取动态路由params传值,需要使用$route
      // $route.params是一个对象,包含params传递过来的数据
      const { id } = this.$route.params;
      switch (id) {
        case "1":
          return "周杰伦";
        case "2":
          return "林俊杰";
        case "3":
          return "陈奕迅";
        default:
          return "XXXX";
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    console.log(to, from, next);
    console.log("路由内进入时守卫");
    console.log(this,"111"); //undefined
    next((vm) => {
      console.log(vm,"222");
    });
  },
  
  beforeRouteUpdate(to, from, next) {
    console.log(to, from, next, "beforeRouteUpdate");
    console.log("组件内更新时");
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log(to, from, next, "beforeRouteLeave");
    console.log("组件离开时");
    next();
  },

  //监视动态路由参数的更新
  watch: {
    $route(newVal) {
      console.log("动态路由更新参数", newVal);
    },
  },
};
</script>

<style>
</style>